{extend name="personcentor/information"}


{block name="main"}
	  <!--上传图片插件开始-->
	<script>
        //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
            var MAXWIDTH  = 50;
            var MAXHEIGHT = 90;
            var div = document.getElementById('preview');
            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
                var img = document.getElementById('imghead');
                img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id=imghead>';
                var img = document.getElementById('imghead');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;

                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
	</script>
	  <!--上传图片插件结束-->

	  <!--显示个人信息的表格开始-->
     {volist name="hehe" id="vo"}
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">修改个人信息</strong> / <small>Update Personal&nbsp;information</small></div>
						</div>
						<hr/>
						<form class="am-form am-form-horizontal" method="post" action="{:url('index/personcenter/update',['id'=>$vo['id']])}" enctype="multipart/form-data">
						<!--头像 -->
						<div class="user-infoPic">
							<div class="col-sm-3 big-photo" style="margin-left:35%;">
								<div id="preview">
									<img id="imghead" border="0" src="/uploads/person/{$vo['Avatar']}" height="90" onclick="$('#previewImg')
									.click();">
								</div>
								<input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="image" value="{$vo['Avatar']}"  >
							</div>

							<p class="am-form-help">头像</p>

						</div>

						<!--个人信息 -->
						<div class="info-main">

								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">账户名</label>
									<div class="am-form-content">
										<input type="text" id="user-name2" placeholder="账户名" name="user" value="{$vo['user']}">
                                          <small>昵称长度不能超过40个汉字</small>
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">姓名</label>
									<div class="am-form-content">
										<input type="text" id="user-name2"  name="user_name" value="{$vo['user_name']}">
                                         
									</div>
								</div>

								<div class="am-form-group">
									<label class="am-form-label">性别</label>
									<div class="am-form-content sex">
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="{$vo['sex']==1 ? $vo['sex'] :'1'}" {if condition="($vo.sex eq '1' )or($vo.sex eq '' ) "} checked {/if} > 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="{$vo['sex']==0 ? $vo['sex'] :'0'}" {if condition="$vo.sex eq '0' "} checked {/if}> 女
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="{$vo['sex']==3 ? $vo['sex'] :'3'}" {if condition="$vo.sex eq '3' "} checked {/if}> 保密
										</label>
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-birth" class="am-form-label">生日</label>
									<div class="am-form-content birth">
										<div class="birth-select">
											<select class="data-am-selected" name="year">
												{for start="1900" end="2018"}
												{if condition="$path[0] eq $i"}
												<option value="{$i}" selected>{$i}</option>
												{else/}
												<option value="{$i}">{$i}</option>
												{/if}
												{/for}
											</select>
											<em>年</em>
										</div>
										<div class="birth-select2">
											<select class="data-am-selected" name="month">
												{for start="1" end="13"}
												{if condition="$path[1] eq $i"}
												<option value="{$i}" selected>{$i}</option>
												{else/}
												<option value="{$i}">{$i}</option>
												{/if}
												{/for}
											</select>
											<em>月</em></div>
										<div class="birth-select2">
											<select class="data-am-selected" name="day">
												{for start="1" end="32"}
												{if condition="$path[2] eq $i"}
												<option value="{$i}" selected>{$i}</option>
												{else/}
												<option value="{$i}">{$i}</option>
												{/if}
												{/for}
											</select>
											<em>日</em></div>
									</div>

								</div>
								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone"  type="tel" value="{$vo['user_phone']}" name="user_phone">
									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label" name="email">电子邮件</label>
									<div class="am-form-content">
										<input id="user-email"  type="email" value="{$vo['email']}" name="email">


									</div>
								</div>

								<div class="info-btn">
									<button class="am-btn am-btn-danger">保存修改</button>
								</div>


							</form>
						</div>

					</div>

				</div>
			
			</div>

	  <!--显示个人信息的表格结束-->
{/volist}
{/block}
		


